<template>
  <div id="success">
    <div class="scroll-wrap" ref="wrapper">
      <!-- <div class="tip">
          <md-notice-bar icon="info" mode="link">场景普法：业主如何要求召开业主大会表决</md-notice-bar>
      </div>-->
      <div class="bscroll-container">
        <!-- 刷新提示信息 -->
        <div class="top-tip">
          <span class="refresh-hook">{{pulldownMsg}}</span>
        </div>
        <!-- 内容列表 -->
        <div class="content">
          <div class="scroll-item" v-for="(item,index) in list" :key="index">
            <div class="top" @click="download(item.number)">
              <span class="id">业主提议编号：{{item.number}}</span>
              <span class="status">已通过</span>
            </div>
            <div class="mid" @click="download(item.number)">
              <h3>{{item.title}}</h3>
              <div class="content">
                <p class="desc">{{item.content}}</p>
                <div class="progress">
                  <md-progress
                    :size="50"
                    :value="item.vote_per * 0.01"
                    :width="5"
                    :rotate="-90"
                    color="#d7b987"
                  >
                    <span class="progress-value">{{item.vote_per}}%</span>
                  </md-progress>
                </div>
              </div>
            </div>
            <div class="bottom">
              <div class="op">
                <div class="col" @click="collectItem(item.id)">
                  <i></i>
                  <span>收藏</span>
                </div>
                <!-- <div>
                <i></i>
                <span>转发</span>
                </div>-->
                <div class="dow" @click="download(item.number)">
                  <i></i>
                  <span>详图下载</span>
                </div>
              </div>
              <p class="time">通过时间：{{item.days}}</p>
            </div>
          </div>
        </div>
        <!-- 底部提示信息 -->
        <div class="bottom-tip">
          <span class="loading-hook">{{pullupMsg}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import https from "@/https";
import config from "@/config";
import { NoticeBar, Toast, Progress } from "mand-mobile";
export default {
  name: "success",
  components: {
    [NoticeBar.name]: NoticeBar,
    [Progress.name]: Progress
  },
  data() {
    return {
      pulldownMsg: "下拉刷新",
      pullupMsg: "加载更多",
      list: [], //
      pn: 1, //
    };
  },
     computed: {
    mobile() {
      return this.$store.getters.getUserInfo.mobile;
    }
  },
  methods: {
    // 获取废止列表
    voteList() {
      Toast.loading("加载中...");
      let qid = this.$store.state.residentialType.qid;
      let params = {
        mobile: this.mobile,
        status: 2,
        pn: 1,
        pagesize: 10,
        qid,
        uid: this.$store.state.userInfo.id
      };
      https
        .fetchPost(config.voteList, params)
        .then(res => {
            Toast.hide();
          if (res.data.code == 1) {
            let list = res.data.data;
            if(list.length != 0){
                list.forEach(element => {
                  element.days = this.dataFormat(
                    element.days * 3600 * 24 * 1000 + element.createtime * 1000,
                    2
                  );
                });
            }
            this.list = list;
            this.pn = 1;
            //恢复刷新提示文本值
            this.pulldownMsg = "下拉刷新";
            //刷新列表后，重新计算滚动区域高度
            this.scroll.refresh();
          } else {
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
            Toast.hide();
          console.log(err);
        });
    },
    //获取更多
    moreVoteList() {
      Toast.loading("加载中...");
      let qid = this.$store.state.residentialType.qid;
      let pn = this.pn + 1;
      let params = {
        mobile: this.mobile,
        status: 2,
        pn,
        pagesize: 10,
        qid,
        uid: this.$store.state.userInfo.id
      };
      https
        .fetchPost(config.voteList, params)
        .then(res => {
            Toast.hide();
          if (res.data.code == 1) {
            let newList = res.data.data;
            if (newList.length != 0) {
              newList.forEach(element => {
                element.days = this.dataFormat(
                  element.days * 3600 * 24 * 1000 + element.createtime * 1000,
                  2
                );
              });
              let oldList = this.list;
              this.list = oldList.concat(newList);
              this.pn = pn;
              this.pullupMsg = "加载更多";
              this.scroll.refresh();
            } else {
              Toast.failed("没有更多咯");
            }
          } else {
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
            Toast.hide();
          console.log(err);
        });
    },
    // 收藏
    collectItem(id) {
      let params = {
        mobile: this.mobile,
        id
      };
      https
        .fetchPost(config.love, params)
        .then(res => {
          console.log(res.data);
          if (res.data.code == 1) {
            Toast.succeed(res.data.msg);
          } else {
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 下载
    download(number) {
      this.$router.push({
        path: "/download",
        query: {number: number}
      });
    },
    // 时间戳转换
    dataFormat(num, type) {
      var dd = new Date(num);
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1;
      var d = dd.getDate();
      var h = dd.getHours();
      var i = dd.getMinutes();
      var s = dd.getSeconds();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      h = h < 10 ? "0" + h : h;
      i = i < 10 ? "0" + i : i;
      s = s < 10 ? "0" + s : s;
      if (type == 1) {
        return y + "-" + m + "-" + d + " " + h + ":" + i + ":" + s;
      } else {
        return y + "-" + m + "-" + d + " " + h + ":" + i;
      }
    },
  },
  created() {
    this.voteList();
    const that = this;
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {
        //初始化better-scroll
        probeType: 1, //1 滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。 3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
        click: true //是否派发click事件
      });
      // 滑动过程中事件
      this.scroll.on("scroll", pos => {
        if (pos.y > 30) {
          this.pulldownMsg = "释放立即刷新";
        }
      });
      //滑动结束松开事件
      this.scroll.on("touchEnd", pos => {
        //上拉刷新
        if (pos.y > 30) {
          this.voteList();
        } else if (pos.y < this.scroll.maxScrollY - 30) {
          //下拉加载
          this.pullupMsg = "加载中。。。";
          this.moreVoteList();
        }
      });
    });
  }
};
</script>

<style lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
.md-notice-bar {
  z-index: 1;
}
#success {
  background: #fff;
  .scroll-wrap {
    height: calc(100vh - 100px);
    .tip {
      padding: 30px 30px;
    }
    .scroll-item {
      box-shadow: 0 1px 16px #ddd;
      margin: 0 30px 30px;
      padding-bottom: 15px;
      border-radius: 8px;
      .top {
        padding: 0 20px;
        font-size: 24px;
        color: #333;
        display: flex;
        background: $themeGold;
        background: linear-gradient(to right, #f1dab2, #d6b06f);
        justify-content: space-between;
        align-items: center;
        height: 70px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        .status {
          color: #fff;
          font-size: 26px;
        }
      }

      .mid {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        padding: 0 20px;
        h3 {
          font-size: 30px;
          line-height: 50px;
          padding: 20px 0 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .content {
          display: flex;
          justify-content: space-between;
          margin-top: 15px;
          .desc {
            font-size: 26px;
            color: #777;
            line-height: 40px;
            width: 420px;
          }
          .progress {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0 0 10px;
            width: 220px;
            .progress-value {
              font-size: 26px;
              color: #666;
            }
            .nav-btn {
              margin-top: 15px;
              font-size: 24px;
              color: #fff;
              padding: 15px 20px;
              border-radius: 40px;
              background: #d6b06f;
            }
          }
        }
      }
      .bottom {
        display: flex;
        padding: 0 20px;
        margin-top: 10px;
        justify-content: space-between;
        .op {
          display: flex;
          align-items: center;
          font-size: 26px;
          color: #666;
          i {
            width: 32px;
            height: 32px;
            margin-right: 8px;
          }
          .col {
            display: flex;
            align-items: center;
            height: 100%;
            i {
              background: url("/static/images/suggest/col.png") center center no-repeat;
              background-size: 100%;
            }
          }
          .dow {
            display: flex;
            align-items: center;
            margin-left: 35px;
            height: 100%;

            i {
              background: url("/static/images/suggest/dow.png") center center no-repeat;
              background-size: 100%;
            }
          }
        }
        .time {
          font-size: 24px;
          color: #666;
          line-height: 50px;
        }
      }
    }
  }
  .bscroll-container {
    padding-top: 30px;
    padding-bottom: 25px;
  }
  .top-tip {
    position: absolute;
    top: -40px;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 28px;
    text-align: center;
    color: #ccc;
  }
  .bottom-tip {
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #999;
    font-size: 28px;
    position: absolute;
    bottom: -30px;
    left: 0;
  }
}
</style>
